<template>
  <div class="my-container">
    <van-cell-group>
      <div v-if="user">
        <van-cell :border="false" center>
          <div class="avatar" slot="title">
            <van-image fit="cover" round :src="currentUser.photo" />
            <span>{{currentUser.name}}</span>
          </div>
          <van-button type="default" round size="small" to="/user/profile"> 修改资料 </van-button>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item>
            <div slot="icon"> {{currentUser.art_count}}</div>
            <div slot="text"> 头条</div>
          </van-grid-item>
          <van-grid-item>
            <div slot="icon"> {{currentUser.follow_count}}</div>
            <div slot="text"> 关注</div>
          </van-grid-item>
          <van-grid-item>
            <div slot="icon"> {{currentUser.fans_count}}</div>
            <div slot="text"> 粉丝</div>
          </van-grid-item>
          <van-grid-item>
            <div slot="icon"> {{currentUser.like_count}}</div>
            <div slot="text"> 点赞</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div v-else class="shouji">
        <img src="./shouji.png" @click="$router.push('/login')">
        <span>登陆</span></div>

    </van-cell-group>
    <van-grid :border="false" :column-num="2" class="bb">
      <van-grid-item icon="shoucang" icon-prefix='toutiao' text="收藏" />
      <van-grid-item icon="lishi" icon-prefix='toutiao' text="历史" />
    </van-grid>
    <div class="bb">
      <van-cell class="bb" title="消息通知" is-link to="index" />
      <van-cell title="小智同学" is-link to="/user/chat" />
    </div>
    <van-cell v-if='user' class="center" title="退出登陆" @click="onLoginout" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCurrentUser } from '@/api/user'
export default {
  name: 'MyIndex',
  data() {
    return {
      currentUser: {
        like_count: ''
      }
    }
  },
  created() {
    if (this.user) {
      console.log(this.user)
      this.loadProfile()
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    onLoginout() {
      this.$dialog
        .confirm({
          title: '退出提示',
          message: '确定退出登陆吗？'
        })
        .then(() => {
          this.$store.commit('setUser', null)
        })
        .catch(() => {})
    },
    async loadProfile() {
      try {
        const { data: res } = await getCurrentUser()
        this.currentUser = res.data
      } catch {
        this.$toast({
          message: '或许信息失败'
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.my-container {
  height: 100%;
  background: #eeeeee;
}
.van-image {
  margin-right: 15px;
  width: 66px;
  height: 66px;
  border: 1px solid #fff;
  box-sizing: border-box;
}
.avatar {
  display: flex;
  align-items: center;
  span {
    color: #fff;
  }
}
.van-cell-group {
  padding-top: 30px;
  height: 168px;
  font-size: 15px;
  color: #fff;
  background: url('./banner.png') no-repeat;
  .van-cell {
    background-color: unset;
  }
  /deep/.van-grid-item__content {
    background-color: unset;
  }
}
.bb {
  margin-bottom: 3px;
}
.van-grid /deep/ i {
  color: red;
}
.center {
  text-align: center;
}
.shouji {
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 100px;
    margin-bottom: -15px;
  }
  span {
    // display: inline-block;
    margin-top: 20px;
    font-size: 18px;
  }
}
</style>
